import Link, { LinkProps } from "next/link";
import styles from "./style.module.scss";
import classnames from "classnames";

export interface ProcessLinkProps extends LinkProps {
  active?: boolean;
  isProcess?: boolean;
  process?: number;
}

const ProcessLink: React.FC<React.PropsWithChildren<ProcessLinkProps>> = ({
  children,
  active,
  isProcess,
  process,
  ...props
}) => {
  return (
    <Link
      className={classnames(
        styles["process-link"],
        isProcess && active ? styles["process-link--process"] : "",
        !isProcess && active ? styles["process-link--active"] : "",
        active ? "pointer-events-none" : ""
      )}
      {...props}
    >
      {children}
      <div
        className={styles["process-link__bar"]}
        style={
          active
            ? {
                transition: "width 0s linear",
                width: `${(process || 0) * 100}%`,
              }
            : {}
        }
      ></div>
    </Link>
  );
};

export default ProcessLink;
